<template>
  <div class="main-container">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我的会话" name="0">
          <div class="main-container">
            <TableBody ref="tableBody">
              <template>
                <el-table ref="table" v-loading="tableLoading" :data="dataList"
                  :header-cell-style="tableConfig.headerCellStyle" :size="tableConfig.size" :stripe="tableConfig.stripe"
                  :border="tableConfig.border">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column align="center" label="会话" prop="id" />
                  <el-table-column align="center" label="登录名" prop="username">
                  </el-table-column>
                  <el-table-column align="center" label="用户名称" prop="displayName">

                  </el-table-column>
                  <el-table-column align="center" label="状态" prop="sessionStatus">

                  </el-table-column>
                  <el-table-column align="center" label="登录方式" prop="loginType" />
                  <el-table-column align="center" label="访问地址" prop="sourceIp" />
                  <el-table-column align="center" label="浏览器" prop="browser" />
                  <el-table-column align="center" label="平台" prop="platform" />
                  <el-table-column align="center" label="登录时间" prop="loginTime" width="160px" />
                </el-table>
              </template>
            </TableBody>
            <TableFooter :current-page="pageModel.currentPage" :page-size="pageModel.pageSize"
              :total-size="pageModel.totalSize" @pageSizeChanged="pageSizeChanged" @currentChanged="currentChanged"
              @onRefresh="doRefresh" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="系统登录日志" name="1">
          <div class="main-container">
            <TableBody ref="tableBody">
              <template>
                <el-table ref="table" v-loading="tableLoading" :data="dataList2"
                  :header-cell-style="tableConfig.headerCellStyle" :size="tableConfig.size" :stripe="tableConfig.stripe"
                  :border="tableConfig.border">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column align="center" label="会话" prop="id" />
                  <el-table-column align="center" label="登录名" prop="username">
                  </el-table-column>
                  <el-table-column align="center" label="用户名称" prop="displayName">

                  </el-table-column>
                  <el-table-column align="center" label="状态" prop="sessionStatus">

                  </el-table-column>
                  <el-table-column align="center" label="登录方式" prop="loginType" />
                  <el-table-column align="center" label="访问地址" prop="sourceIp" />
                  <el-table-column align="center" label="浏览器" prop="browser" />
                  <el-table-column align="center" label="平台" prop="platform" />
                  <el-table-column align="center" label="登录时间" prop="loginTime" width="160px" />
                </el-table>
              </template>
            </TableBody>
            <TableFooter :current-page="pageModel2.currentPage" :page-size="pageModel2.pageSize"
              :total-size="pageModel2.totalSize" @pageSizeChanged="pageSizeChanged2" @currentChanged="currentChanged2"
              @onRefresh="doRefresh" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="应用访问日志" name="2">
          <div class="main-container">
            <TableBody ref="tableBody">
              <template>
                <el-table ref="table" v-loading="tableLoading" :data="dataList3"
                  :header-cell-style="tableConfig.headerCellStyle" :size="tableConfig.size" :stripe="tableConfig.stripe"
                  :border="tableConfig.border">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column align="center" label="会话" prop="id" />
                  <el-table-column align="center" label="登录名" prop="username">
                  </el-table-column>
                  <el-table-column align="center" label="用户名称" prop="displayName">

                  </el-table-column>
                  <el-table-column align="center" label="应用名称" prop="appName">

                  </el-table-column>
                  <el-table-column align="center" label="登录时间" prop="loginTime" width="160px" />
                </el-table>
              </template>
            </TableBody>
            <TableFooter :current-page="pageModel3.currentPage" :page-size="pageModel3.pageSize"
              :total-size="pageModel3.totalSize" @pageSizeChanged="pageSizeChanged3" @currentChanged="currentChanged3"
              @onRefresh="doRefresh" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="社交关联" name="3">
          <div class="main-container">
            <TableBody ref="tableBody">
              <template>
                <el-table ref="table" v-loading="tableLoading" :data="dataList4"
                  :header-cell-style="tableConfig.headerCellStyle" :size="tableConfig.size" :stripe="tableConfig.stripe"
                  :border="tableConfig.border">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column align="center" label="图标" prop="icon">
                    <template slot-scope="scope">
                      <img :src="'../../../' + scope.row.icon" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="供应商" prop="provider">
                  </el-table-column>
                  <el-table-column align="center" label="供应商名称" prop="providerName">

                  </el-table-column>

                  <el-table-column align="center" label="绑定时间" prop="createdDate" width="160px" />
                  <el-table-column align="center" label="最近登录时间" prop="updatedDate" width="220px" />
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <div v-if="scope.row.userId == null">
                        <el-button size="mini" @click="handleBind(scope.row)" type="text">绑定账号</el-button>
                      </div>
                      <div v-else-if="scope.row.userId">
                        <el-popconfirm title="确定要解除绑定吗?" confirm-button-text='好的' cancel-button-text='不用了'
                          icon="el-icon-info" icon-color="red" @confirm="confirm(scope.row)">
                          <el-button size="mini" type="text" slot="reference">解除绑定</el-button>

                        </el-popconfirm>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </TableBody>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="应用关联" name="4">应用关联</el-tab-pane> -->
        <el-tab-pane label="时间令牌" name="4">
          <el-row>
            <el-col :span="12">
              <div style="text-align: center;">
                <img :src="trimeObj.rqCode" alt="" srcset="">
              </div>
            </el-col>
            <el-col :span="12">
              <el-form label-position="left" label-width="160px">
                <el-form-item label="姓名">
                  <el-input v-model="trimeObj.displayName"></el-input>
                </el-form-item>
                <el-form-item label="账号">
                  <el-input v-model="trimeObj.username"></el-input>
                </el-form-item>
                <el-form-item label="长度">
                  <el-input v-model="trimeObj.digits"></el-input>
                </el-form-item>
                <el-form-item label="周期">
                  <el-input v-model="trimeObj.period"></el-input>
                </el-form-item>
                <el-form-item label="共享密钥(BASE32)">
                  <el-input v-model="trimeObj.sharedSecret"></el-input>
                </el-form-item>
                <el-form-item label="共享密钥( HEX )">
                  <el-input v-model="trimeObj.hexSharedSecret"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import api from "@/api/setting";
import TableMixin, { PageModelMixin } from '@/mixins/TableMixin'
import {
  LikeSearchMixin,
  GetDataMixin,
  RefreshActionMixin
} from '@/mixins/ActionMixin'
export default {
  name: 'TableWithSearch',
  mixins: [
    TableMixin,
    LikeSearchMixin,
    GetDataMixin,
    PageModelMixin,
    RefreshActionMixin
  ],
  data() {
    return {
      activeName: '0',
      filterList: null,
      dataList: [],
      dataList2: [],
      dataList3: [],
      dataList4: [],
      trimeObj: {},
      pageModel: {
        startDate: "",
        endDate: "",
        currentPage: 1,
        pageSize: 10,
        totalSize: 0
      },
      pageModel2: {
        startDate: "",
        endDate: "",
        currentPage: 1,
        pageSize: 10,
        totalSize: 0,
        pageSizeOptions: 50
      },

      pageModel3: {
        startDate: "",
        endDate: "",
        currentPage: 1,
        pageSize: 10,
        totalSize: 0,
        pageSizeOptions: 50
      }

    };
  },
  created() {
  },
  mounted() {
    this.getformatTime();
    this.doSearch();
  },
  methods: {
    handleClick(tab, event) {
      switch (tab.index) {
        case "0":
          this.doSearch();
          break;
        case "1":
          this.doSearch2();
          break;
        case "2":
          this.doSearch3();
          break;
        case "3":
          this.doSearch4();
          break;
        case "4":
          this.doSearch5();
          break;
        default:
          break;
      }

    },
    handleBind(val) {
      console.log(val);
      api.bindAppApi(val.provider).then((res) => {
        console.log("绑定..");
        console.log(res);
        if (res.code == 0) {
          window.location.href = res.data
        }
      })
    },
    confirm(val) {
      api.deleteAppApi(val.id).then((res) => {
        if (res.code == 0) {
          this.$message.success('操作成功');
          this.doSearch4();
        }
      });
    },
    // 重写 doSearch方法，自定义实现过程
    doSearch() {
      this.pageModel.pageNumber = this.pageModel.currentPage;
      api.getSessionInfo(this.pageModel).then(res => {
        if (res.code == 0) {
          this.dataList = res.data.rows
          this.pageModel.totalSize = res.data.records
        }
      })
    },
    doSearch2() {
      this.pageModel2.pageNumber = this.pageModel2.currentPage;
      api.getloginHistory(this.pageModel2).then(res => {
        if (res.code == 0) {
          this.dataList2 = res.data.rows
          this.pageModel2.totalSize = res.data.records
        }
      })
    },
    doSearch3() {
      this.pageModel3.pageNumber = this.pageModel3.currentPage;
      api.getAppHistory(this.pageModel3).then(res => {
        if (res.code == 0) {
          this.dataList3 = res.data.rows
          this.pageModel3.totalSize = res.data.records
        }
      })
    },
    async doSearch4() {
      await api.getsocialsignon().then(res => {
        if (res.code == 0) {
          this.dataList4 = res.data
        }
      })
    },
    doSearch5() {
      api.gettimebased().then(res => {
        if (res.code == 0) {
          this.trimeObj = res.data
        }
      })
    },
    getformatTime() {
      var myDate = new Date();
      this.pageModel.endDate = this.timeUtils(myDate);
      myDate.setMonth(myDate.getMonth() - 1);
      this.pageModel.startDate = this.timeUtils(myDate);
    },

    timeUtils(myDate) {
      var y = myDate.getFullYear();
      var m = this.numberFormat(myDate.getMonth() + 1);
      var d = this.numberFormat(myDate.getDate());
      var h = this.numberFormat(myDate.getHours());
      var mu = this.numberFormat(myDate.getMinutes());
      var s = this.numberFormat(myDate.getSeconds());
      return y + "-" + m + "-" + d + " " + h + ":" + mu + ":" + s;
    },
    numberFormat(index) {
      return index = index < 10 ? "0" + index : index;
    },
    pageSizeChanged(val) {
      this.pageModel.pageSize = val;
      this.doSearch();
    },
    currentChanged(val) {
      this.pageModel.currentPage = val;
      this.doSearch();
    },
    pageSizeChanged2(val) {
      this.pageModel2.pageSize = val;
      this.doSearch2();
    },
    currentChanged2(val) {
      this.pageModel2.currentPage = val;
      this.doSearch2();
    },
    pageSizeChanged3(val) {
      this.pageModel3.pageSize = val;
      this.doSearch3();
    },
    currentChanged3(val) {
      this.pageModel3.currentPage = val;
      this.doSearch3();
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 50px;

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    // width: 480px;
  }
}

.avatar-container {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  vertical-align: middle;

  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .avatar-vip {
    border: 2px solid #cece1e;
  }

  .vip {
    position: absolute;
    top: 0;
    right: -9px;
    width: 15px;
    transform: rotate(60deg);
  }
}

.gender-container {
  .gender-icon {
    width: 20px;
  }
}
</style>
